<template>
	<view class="info_bg">
		<image class="bgimg" :src="sjInfo.logo" mode="aspectFill"></image>
		<image @click="$helper.back(1)" class="back-img" src="/static/image/back.png" mode=""></image>
		<image class="more-img" src="/static/image/more.png" mode="" @click="handleMore"></image>
		<view class="info-content">
			<view class="active-one-lists">
				<view class="active-one-lists-bottom">
					<view class="active-one-lists-bottom-left">
						<image :src="sjInfo.logo" mode=""></image>
					</view>
					<view class="active-one-lists-bottom-right">
						<!-- <view class="active-one-lists-bottom-right-title">头道汤·养生馆</view> -->
						<view class="active-one-lists-bottom-right-title flex justify-between">
							<view class="flex">
								<view class="">{{sjInfo.name}}</view>
								<view
									style="color: #FEC92F;font-weight: bold; font-size: 30rpx;margin: 8rpx 0 0 15rpx;">
									{{sjInfo.score}}
								</view>
							</view>
							<view style="font-size: 22rpx;color: #666666;margin-top: 16rpx;">
								{{sjInfo.distance}}KM
							</view>
						</view>
						<view class="active-one-lists-bottom-right-time">
							<image src="/static/image/activity/time.png" mode=""></image>
							<view class="">营业时间：{{sjInfo.hours}}</view>
						</view>
						<view class="active-one-lists-bottom-right-address">
							<image src="/static/image/activity/address.png" mode=""></image>
							<view class="">{{sjInfo.address}}</view>
						</view>
						<view class="active-one-lists-bottom-right-price flex justify-between">
							<view class="">
								<text style="color: #FF0000;font-size: 30rpx;">￥{{sjInfo.avg_price}}/人均</text>
								<text style="color: #999999;font-size: 24rpx;margin-left: 10rpx;">已售{{sjInfo.virtual_sales}}</text>
							</view> 
							<image style="width: 28rpx;height: 28rpx;margin: 10rpx 10rpx 0 0;" src="/static/image/activity/address-1.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			<view class="active-one-lists-title">
				店铺产品(spLists.length)
			</view>
			<merchantList v-for="(item,index) in spLists" :showKm="true" :showBtn="true"></merchantList>
		</view>
	</view>


</template>

<script>
	import merchantList from '@/components/ben-components/merchant-list.vue'
	import uniPopup from "@/components/uniapp-components/uni-popup/uni-popup.vue"
	// 打赏弹窗
	import daShangComp from '@/components/nvue-comp/dashang.nvue';
	export default {
		components: {
			merchantList,
			uniPopup,
			daShangComp
		},
		data() {
			return {
				id: '',
				sjInfo:{},
				spLists:[],//商品列表
				total:0,
			}
		},
		onLoad(options) {
			this.id = options.id
			this.getDetails();
		},
		methods: {
			getDetails(){
				let params = {
					id:this.id,
					latitude:'39.911259',
					longitude:'116.395583'
				}
				this.$http.dpDetil(params).then(res=>{
					if(res.code=='1'){
						this.sjInfo = res.data;
						this.getspLists();
					}
				})
			},
			getspLists(){
				let params = {
					shop_id:this.id
				}
				this.$http.getspList(params).then(res=>{
					if(res.code=='1'){
						this.spLists = res.data.data
						this.total = res.data.data.total
					}
				})
			},
			handleMore() {
				this.$refs.popupMore.open()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.select_popup {
		z-index: 9999;
		width: 100%;
	}

	.info_bg {
		width: 100%;
		height: 100vh;
		position: relative;
		overflow: hidden;
	}

	.bgimg {
		width: 100%;
		height: 100vh;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		filter: blur(6rpx);
		/* 调整模糊程度 */
		z-index: -1;
	}


	.back-img {
		width: 18rpx;
		height: 32rpx;
		position: absolute;
		top: 50rpx;
		left: 30rpx;
		z-index: 9999;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.more-img {
		width: 46rpx;
		height: 10rpx;
		position: absolute;
		top: 64rpx;
		right: 30rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.info-content {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 80%;
		background: #F8F8F8;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		overflow-y:auto;
		.active-one-lists-title{
			font-weight: 500;
			font-size: 32rpx;
			color: #000000;
			margin: 20rpx 0 20rpx 20rpx;
		}
		.active-one-lists {
			padding: 20rpx;
			background-color: #fff;
			margin-bottom: 20rpx;
		}

		.active-one-lists-head {
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;

			.active-one-lists-head-box {
				display: flex;
			}

			.active-one-lists-head-img {
				width: 68rpx;
				height: 68rpx;
				border-radius: 50%;
			}

			.active-one-lists-head-middle {
				margin-left: 10rpx;

				.active-one-lists-head-middle-top {
					display: flex;
					align-items: center;

					.name {
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
					}

					.girl-img {
						width: 14rpx;
						height: 22rpx;
						margin: 0 10rpx;
					}

					.vip-img {
						width: 44rpx;
						height: 22rpx;
					}
				}

				.active-one-lists-head-middle-bottom {
					font-weight: 400;
					font-size: 20rpx;
					color: #999999;
				}
			}

			.active-one-lists-head-right {
				width: 128rpx;
				height: 50rpx;
				border-radius: 20rpx;
				text-align: center;
				line-height: 50rpx;
				background-color: #000;
				color: #FEC92F;
				font-size: 24rpx;
				margin-right: 10rpx;
			}
		}

		.active-one-lists-contet {
			font-weight: 400;
			font-size: 26rpx;
			color: #000000;
			margin: 16rpx 0;
		}

		.active-one-lists-bottom {
			display: flex;
			position: relative;

			.active-one-lists-bottom-left {
				width: 250rpx;
				height: 250rpx;

				image {
					width: 100%;
					height: 100%;
				}

				.lable {
					position: absolute;
					width: 80rpx;
					height: 36rpx;
					top: 0;
					left: 0;
					color: #fff;
					font-size: 20rpx;
					background-color: #999;
					text-align: center;
				}
			}

			.active-one-lists-bottom-right {
				margin-left: 10rpx;

				.active-one-lists-bottom-right-title {
					font-weight: 500;
					font-size: 30rpx;
					color: #000000;
				}

				.active-one-lists-bottom-right-time {
					align-items: center;
					margin: 10rpx 0;
					display: flex;
					font-size: 24rpx;
					color: #999999;

					image {
						width: 24rpx;
						height: 24rpx;
						margin-right: 10rpx;
					}
				}

				.active-one-lists-bottom-right-btnss {
					width: 156rpx;
					height: 56rpx;
					text-align: center;
					line-height: 56rpx;
					font-size: 24rpx;
					color: #FEC92F;
					background-color: #000;
					border-radius: 20rpx;
				}

				.active-one-lists-bottom-right-address {
					display: flex;
					font-size: 24rpx;
					color: #999999;
					margin: 10rpx 0;

					image {
						width: 24rpx;
						height: 24rpx;
						margin-right: 10rpx;
					}
				}
			}
		}
	}
</style>